<template>
  <el-row @click.native="toHotelDetail">
    <el-col :span="8">
      <img v-lazy="hotel.photos" alt="" style="width: 320px; height: 210px" />
    </el-col>
    <el-col :span="10" style="padding-right: 20px">
      <h2>{{ hotel.name }}</h2>
      <div class="desc">
        <span>{{ hotel.alias }}</span>
        <div class="mark" v-if="hotel.hoteltype.id">
          <span class="iconfont icon-huangguan1"></span>
          <span class="iconfont icon-huangguan1"></span>
          <span class="iconfont icon-huangguan1"></span>
          <span>{{ hotel.hoteltype.name }}</span>
        </div>
      </div>
      <div class="score">
        <el-rate
          v-model="value"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{ value }"
        >
        </el-rate>
        <div>
          <span>{{ hotel.visits_week }}</span
          >条评价
        </div>
        <div>
          <span>{{ hotel.all_remarks }}</span
          >篇游记
        </div>
      </div>
      <div class="location">
        <i class="el-icon-location-outline"></i>
        位于: {{ hotel.address }}
      </div>
    </el-col>
    <el-col :span="6" style="padding-top: 13px">
      <div
        class="company"
        v-for="(company, index) of hotel.products"
        :key="index"
      >
        <span>{{ company.name }}</span>
        <div>
          <span class="less-price">￥{{ company.price }}</span
          >起<i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "HotelItem",
  props: {
    hotel: {
      type: Object,
      defalut() {
        return {};
      },
    },
  },
  data() {
    return {
      value: this.hotel.stars,
    };
  },
  methods: {
    toHotelDetail() {
      this.$router.push("/hotel/detail?id=" + this.hotel.id);
    },
  },
};
</script>

<style scoped lang="less">
.el-row {
  padding-bottom: 20px;
  margin-top: 20px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  h2 {
    font-size: 24px;
    font-weight: 400;
  }
  .desc {
    > span {
      width: 270px;
    }
    color: #999;
    display: flex;
    justify-content: space-between;
    .icon-huangguan1 {
      color: #ff9900;
    }
  }
  .score {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .el-icon-star-on:before {
      font-size: 20px;
    }
    span {
      color: #ff9900;
    }
  }
  .location {
    color: #666;
    font-size: 14px;
  }
  .company {
    display: flex;
    color: #666;
    margin-top: 10px;
    padding: 10px;
    justify-content: space-between;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
    .less-price {
      color: #ff9900;
    }
    &:hover {
      background: #f5f7fa;
    }
  }
}
</style>
